<!-- 学习记录 -->
<template>
    <el-row style="margin-bottom: 20px;margin-left: 20px;">
        <el-col v-for="(item, index) in displayedData" :key="index" :span="16" :offset="index > 0 ? 0 : 0">
            <el-card :body-style="{ padding: '10px' }" style="width: 900px;margin-top: 20px;padding-left: 20px;">
                <div style="float: left;">
                    <img :src="item.courseCover" style="width: 200px;" />
                </div>
                <div style="float: left;margin-left: 20px;">
                    <span>{{ item.courseName }}</span>
                    <div>
                        <span>学习进度</span>
                    </div>
                    <div style="width: 620px;">
                        <el-progress :percentage="item.goodState.watchProgress" />
                    </div>
                    <div style="margin-top: 20px;">
                        <button style="border: none;">{{ item.goodType }}</button>
                        <el-button type="success" style="float: right;" @click="goBack(item.courseId)">继续观看</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize"
            @current-change="changePage" :total="carouselData.length" style="margin-left: 400px;" />
    </el-row>
</template>
<script>

import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from "element-plus";
import axios from '../../api/index';
import { useRoute, useRouter } from 'vue-router';



export default {
    setup() {
        const carouselData = ref([]);
        const currentPage = ref(1); // 当前页码  
        const pageSize = ref(5); // 每页数据数量
        const route = useRoute();
        const router = useRouter();
        let token = localStorage.getItem('token');
        let longtoken = localStorage.getItem('longtoken');
        // const reccourselData = ref({});

        // 从localStorage中获取存储的JSON字符串  
        var userInfoJsonString = localStorage.getItem('userInfo');

        // 确保userInfoJsonString不是null，如果是null，那么将其设置为空字符串  
        if (userInfoJsonString === null) {
            userInfoJsonString = "{}";
        }
        // 解析JSON字符串为JavaScript对象  
        var userInfo = JSON.parse(userInfoJsonString);

        //发起请求获取用户的学习记录
        onMounted(async () => {

            try {
                //发起请求
                axios.get('/course/learnRecordByUserId', {
                    params: {
                        userId: userInfo.id
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }

                }).then(response => {
                    if (response.code === 200) {
                        console.log(response.data);
                        carouselData.value = response.data;
                        console.log(carouselData.value);

                    } else {
                        ElMessage.error("暂无数据~~");
                    }
                })
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        });

        function goBack(id) {
            router.push("/productVideo/" + id)
        }
        const displayedData = computed(() => {
            const start = (currentPage.value - 1) * pageSize.value;
            const end = start + pageSize.value;
            return carouselData.value.slice(start, end);
        });
        function changePage(newPage) {
            currentPage.value = newPage;
        }
        return {
            changePage,
            displayedData,
            carouselData,
            currentPage,
            pageSize,
            goBack,
            token,
            longtoken,
            // reccourselData,
            route,
            router,
        }
    }
}


</script>